<template>
	<view>
		<view class="mainpadding ffffff">
			<view class="flexleft">
				<view class="iteminput bghui flexleft radius margin_right">
					<view class="hei_text main_size bold">行：</view>
					<input type="number" class="huang_text main_size bold" v-model="hangNum">
				</view>
				<view class="iteminput bghui radius flexleft">
					<view class="hei_text main_size bold">列：</view>
					<input type="number" class="huang_text main_size bold" v-model="lieNum">
				</view>
				<view class="iteminput flexright">
					<view class="shengcheng huang_text bold main_size" @click="shengcheng">生成</view>
				</view>
			</view>
			<!-- 观影屏幕 -->
			<view class="flexcolumn" style="margin-top: 70rpx;" v-if="seatList.length">
				<image class="filmBox" src="../../static/image/system/yinmu.png" mode=""></image>
				<view class="xiaohui">觀影荧幕</view>
				<!-- <view class="xiaohong margin_top1" style="text-align: center;">尊敬的林志辉先生，您是超级Vip会员可免费包場，并設置影厅座位</view> -->
				<view class="xiaohong margin_top1">點擊選擇不可售的座位</view>
				
			</view>
			<view class="seatBox flex" style="margin-top: 50rpx;" v-if="seatList.length">
				<view class="arrange margin_right2 flex1">
					<view :class="index==0?'':'margin_top'" v-for="(item,index) in seatList">{{index+1}}</view>
				</view>
				<view>
					<scroll-view class="scrollBox white_nowrap" scroll-x>
						<view style="margin-top: 12rpx;" v-for="item in seatList">
							<view
								:class="value.state==1?'selected inline_block margin_right1':'select inline_block margin_right1'"
								v-for="value in item.childList" @click="selectSeat(value)"></view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="xiaohuang flexcenter margin_top" v-if="xzList.length">已選中</view>
			<view class="flexleft flex_wrap margin_top2">
				<view class="bghui xiaohei margin_top1 radius margin_right1" style="padding: 20rpx 30rpx ;" v-for="(item,index) in xzList" :key="index">
					{{item.hang}}排{{item.lie}}座
				</view>
			</view>
		</view>
		<view class="mainpadding" v-if="seatList.length">
			<view class="submitbtn">確定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hangNum: "",
				lieNum: "",
				// seatList: [{
				// 	id: 1,
				// 	childList: [{
				// 		state: 0, //0未选中 1选中 
				// 	}, {
				// 		state: 0, //0未选中 1选中 
				// 	}, {
				// 		state: 0, //0未选中 1选中 
				// 	}, {
				// 		state: 0, //0未选中 1选中 
				// 	}]
				// }],
				seatList: [],
				xzList: []
			}
		},
		watch: {
			seatList:{
				deep:true,
				handler(newval){
					let arr = []
					newval.forEach((item,index)=>{
						item.childList.forEach((ite,ind)=>{
							if(ite.state==1){
								arr.push({
									hang:index+1,
									lie:ind+1
								})
							}
						})
					})
					this.xzList = arr
					console.log(this.xzList,99);
				}
			}
		},
		methods: {
			shengcheng() {
				let arr = []
				for (let i = 1; i <= Number(this.hangNum); i++) {
					let childList = []
					for (let y = 1; y <= Number(this.lieNum); y++) {
						childList.push({
							state: 0
						})
					}
					arr.push({
						id: i,
						childList
					})
				}
				this.seatList = arr
			},
			selectSeat(item) {
				item.state = item.state == 1 ? 0 : 1
			},
		}
	}
</script>

<style lang="scss" scoped>
	.white_nowrap {
		white-space: nowrap;
	}

	.inline_block {
		display: inline-block;
	}

	.seatBox {
		position: relative;

		.arrange {
			width: 32rpx;
			text-align: center;
			padding: 20rpx 0;
			box-sizing: border-box;
			background: rgba(0, 0, 0, .3);
			border-radius: 47rpx 47rpx 47rpx 47rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FFFFFF;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;
		}

		// 可选
		.select {
			width: 40rpx;
			height: 40rpx;
			background: #FFFFFF;
			border-radius: 7rpx 7rpx 7rpx 7rpx;
			border: 1rpx solid #E7E7E7;
		}

		// 选中
		.selected {
			width: 40rpx;
			height: 40rpx;
			background: rgba(255, 92, 0, 0.1);
			border-radius: 7rpx 7rpx 7rpx 7rpx;
			opacity: 1;
			border: 1rpx solid #FF5C00;
		}

		// 不可选
		.disSelect {
			width: 40rpx;
			height: 40rpx;
			background: #E4E4E4;
			border-radius: 7rpx 7rpx 7rpx 7rpx;
			opacity: 1;
			border: 1rpx solid #D4D4D4;
		}

		.scrollBox {
			padding-left: 52rpx;
			width: calc(100vw - 100rpx);
		}
	}

	.filmBox {
		width: 400rpx;
		height: 70rpx;
	}

	.iteminput {
		width: 34%;
		padding: 20rpx 30rpx;
	}

	.shengcheng {
		padding: 10rpx 30rpx;
		border-radius: 50rpx;
		border: 1rpx solid #ff8055;
	}
</style>